<template>
	<view>
		<!-- 信息搜索部分 -->
		<view class="u-flex-nowrap u-row-between u-flex page-font">
			<view class="u-flex">请扫码或输入员工工号</view>
		</view>
		<view class="u-flex-nowrap u-row-around u-flex page-font">
			<u-form class="u-flex-col u-flex-nowrap">
				<u-form-item class="u-flex u-row-center">
					<u-input v-model="jobNumber" input-align="center" type="text" placeholder="请输入员工工号" />
				</u-form-item>
				<u-form-item class="u-flex u-row-center">
					<u-button size="medium" type="success" @click="search">查询</u-button>
				</u-form-item>
			</u-form>
			<view class="u-flex-nowrap u-flex-col u-row-center u-col-center" @click="scanFun">
				<u-icon name="scan" color="#2979ff" size="100"></u-icon>
				<view class="$u-type-primary">点击扫码</view>
			</view>
		</view>
		
		<!-- 信息展示部分 -->
		<view>
			<view class="list-item-wrapper" v-bind:id="index" v-for="(item,index) in staffInfo" :key="index">
				<view class="list-item" >
					<view>员工姓名</view>
					<view>{{item.userName}}</view>
				</view>
				<view class="list-item" >
					<view>员工工号</view>
					<view>{{item.jobNumber}}</view>
				</view>
				<view class="list-item" >
					<view>隶属部门</view>
					<view>{{item.departmentName}}</view>
				</view>
				<view class="list-item" >
					<view>手机号码</view>
					<view>{{item.phone}}</view>
				</view>
				<view class="list-item" >
					<view>上级领导的工号</view>
					<view>{{item.parentNumber}}</view>
				</view>
				<!-- 有些员工不具备职级，例如质检人员，后台返回的是null，若为null时则使用无代替 -->
				<view class="list-item" >
					<view>职级</view>
					<view>{{item.jobClassList[0].jobClass == null ? '无' : item.jobClassList[0].jobClass}}</view>
				</view>
				<!-- 使用组件来标记新老员工， newEmployee为1时为新员工，为0时为老员工-->
				<view class="list-item">
					<view>新员工标识</view>
					<view class="u-flex u-row-center">
						<u-tag v-if="item.newEmployee" text="新员工" type="error" size="default" />
						<u-tag v-else text="老员工" type="success" size="default" />
					</view>
				</view>
				<view class="operateBtn">
					<u-button size="default" type="success" @click="getPerformance(item.jobNumber)">员工绩效</u-button>
					<u-button size="default" type="success" @click="getWorkTime(item.jobNumber)">员工工时</u-button>
					<u-button size="default" type="success" @click="rewardAndPunishment(item.jobNumber)">奖惩绩效</u-button>
				</view>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import { getUserByJobNumber } from '../../../utils/index.js'
	export default {
		data() {
			return {
				staffInfo: [],					//存放查询得到的员工信息
				jobNumber: ''					//发送员工工号用以查询员工信息
			}
		},
		methods: {
			// 查询员工信息函数
			async search() {
				const {data} = await getUserByJobNumber({jobNumber: this.jobNumber})
				const errMsg = data.msg
				if(data.code == '1') {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'success',
						duration: '2000'
					})
					this.staffInfo.unshift(data.data)						//多次查询后新查询的内容放在前面
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			//获取绩效，向页面传递0
			getPerformance(value) {
				uni.navigateTo({
					url: "../../../publicPage/perforAndTime?jobNumber=" + value + "&kind=" +'0'
				})
			},
			// 跳转到绩效奖惩页面填写表单
			rewardAndPunishment(value) {
				uni.navigateTo({
					url: "../../../publicPage/rewardAndPunish?jobNumber=" + value
				})
			},
			//获取工时，向页面传递1
			getWorkTime(value) {
				uni.navigateTo({
					url: "../../../publicPage/perforAndTime?jobNumber=" + value + "&kind=" + '1'
				})
			},
			// 点击图标，启用扫码函数
			// 扫码得到二维码信息赋值给jobNumber，随后自动调用search()函数查询
			scanFun() {
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						that.jobNumber = res.result
						that.search()
					},
					fail() {
						console.log('识别失败')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-font {
	font-size: 40rpx;
}
.list-item-wrapper {
	margin: 30rpx;
	background-color: #FFEFD5;
}
.list-item {
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	margin: 10rpx 10rpx;
}
// 上线下线按钮样式
.operateBtn {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}
</style>
